<template>
    <div class='login'>
       <el-form ref="form" :model="form" :rules="rules" class='container'>
            <el-form-item>
               <div class='avatar'>
                 <img src='../assets/avatar.jpg'>
               </div>
            </el-form-item>
            <el-form-item prop='username'>
                <el-input v-model="form.username" placeholder='账号' prefix-icon="myicon myicon-user"></el-input>
            </el-form-item>
            <el-form-item prop='password'>
                <el-input v-model="form.password" placeholder='密码' prefix-icon="myicon myicon-key"></el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" class='login-btn' @click="loginSubmit('form')">登录</el-button>
            </el-form-item>
       </el-form>
    </div>
</template>
<script>
import {checkUser} from '../api/index.js'
// import axios from 'axios'
    export default{
        data(){
            return{
                form:{
                    username:'',
                    password:''
                },
                rules:{
                    username:[{required: true, message: '请输入用户名称', trigger: 'blur' }],
                    password:[{ required: true, message: '请输入密码', trigger: 'blur'}]
                }
            }
        },
      
       methods:{
           
           loginSubmit(formName){
              this.$refs[formName].validate((valide)=>{
                  if(valide){
                      checkUser(this.form).then(res=>{
                          //如果成功要跳转至首页
                          if(res.meta.status===200){
                              //如果请求成功，将token信息保存到本地
                              localStorage.setItem('mytoken',res.data.token)
                              //通过函数式编程实现跳转至首页
                             this.$router.push({name:'Home'})
                          }else{
                              //输出登录失败信息
                              this.$message({
                                message: res.meta.msg,
                                type: 'error'
                            });
                          }
                      })
                  }else{
                      console.log('校验不通过')
                  }
              })
            // console.log(this.$refs.form)
            // console.log(formName)
            // console.log(this.$refs)
            // console.log(this.$refs.form)
            // console.log(this.$refs.form.validate)
            //  this.$refs.form.validate((valide)=>{
            //       console.log(valide)
            //       if(valide){
            //           console.log('校验通过')
            //       }else{
            //           console.log('校验不通过')
            //       }
            //   })
           }
       }
    }
</script>
<style lang="scss" scoped>
    .login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #2f4050;

  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: white;
    .avatar {
      position: relative;
      left: 50%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>